<!-- 中部设备 -->

<template>
  <EasyCard title="设备状况" class="Survey-MiddleDevice" noScroll third>
    <div class="flexCC">
      <div v-for="{ type, ...props } in list" :key="type">
        <MyChart v-bind="props" />
        <span>{{ type }}</span>
      </div>
    </div>
  </EasyCard>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MiddleDevice',

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      // 列表数据
      list: [
        {
          value: 75,
          total: 2350,
          color: CORE.dict(CORE.DICT.COLOR, '绿', 2),
          type: '在线',
        },
        {
          value: 20,
          total: 1420,
          color: CORE.dict(CORE.DICT.COLOR, '灰', 2),
          type: '离线',
        },
        {
          value: 5,
          total: 370,
          color: CORE.dict(CORE.DICT.COLOR, '红', 2),
          type: '故障',
        },
      ],
    }
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
